<template>
  <div class="content">
    <div class="row">
      <div class="col-md-12">
        <div class="box">
          <!-- <div class="box-header">
            <h3 class="box-title">短信列表</h3>
          </div> -->
          <el-form :inline="true" :model="listQuery" class="demo-form-inline" label-width="90px">
            <el-form-item label="姓名" prop="custName">
              <el-input v-model.trim="listQuery.custName" placeholder="请输入姓名" clearable style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="custPhoneNum">
              <el-input v-model.trim="listQuery.custPhoneNum" placeholder="请输入手机号" clearable style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="业务类型" prop="businessType">
              <el-select v-model="listQuery.businessType" placeholder="请选择业务类型">
                <el-option v-for="item in BusinessTypeList" :key="item.businessType" :label="item.businessName" :value="item.businessType" />
              </el-select>
            </el-form-item>
            <el-form-item label="发送状态" prop="messageStatus">
              <el-select v-model="listQuery.messageStatus" placeholder="请选择发送状态">
                <el-option v-for="item in sendingStatus" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="短信模板ID" prop="templatesID">
              <el-input v-model.trim="listQuery.templatesID" placeholder="请输入短信模板ID" clearable style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="发送时间" prop="name">
              <el-date-picker
                v-model="times"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
                <button class="btn btn-default" type="button" @click="handleQuery">查询</button>
            </el-form-item>
          </el-form>

          <div class="box-body">
            <div class="table-responsive">
              <el-table
                :key="tableKey"
                v-loading="listLoading"
                :data="list"
                border
                fit
                stripe
                highlight-current-row
                style="width: 100%;"
              >
                <el-table-column
                  label="手机号"
                  prop="custPhoneNum"
                  align="left"
                  min-width="110" />
                <el-table-column
                  label="姓名"
                  prop="custName"
                  align="left"
                  width="70" />
                <el-table-column
                  label="模版ID"
                  prop="templatesID"
                  align="left"
                  min-width="120" />
                <el-table-column
                  label="短信内容"
                  prop="messgaeContent"
                  align="left"
                  min-width="150" />
                <el-table-column
                  label="状态"
                  prop="messageStatus"
                  align="left"
                  width="70">
                  <template slot-scope="scope">
                    <span v-if="scope.row.messageStatus == 0">成功</span>
                    <span v-if="scope.row.messageStatus == 1">失败</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="发送时间"
                  prop="createTime"
                  align="left"
                  width="120" />
              </el-table>
            </div>
          </div>
          <div class="box-footer clearfix">
            <!-- 控制分页模块 -->
            <pagination align="right" v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBusinessType, getMessage } from '@/api/customerManagement'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'sysRole',
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: false,
      times: null,
      listQuery: {
        custName: null, // 客户姓名
        custPhoneNum: null, // 客户手机号
        businessType: null, // 业务类型
        messageStatus: null, // 发送状态
        readStatus: null, // 读取状态
        templatesID: null, // 短信模版
        startTIme: null,
        endTime: null,
        pageNum: 1,
        pageSize: 20
      },
      sendingStatus: [ // 发送状态
        {
          label: '成功',
          value: '0'
        },
        {
          label: '失败',
          value: '1'
        }
      ],
      BusinessTypeList: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  created() {
    this.getList()
    this.getBusinessType()
  },
  methods: {
    getList() {
      getMessage(this.listQuery).then(response => {
        this.list = response.content
        this.total = response.totalElements

        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    getBusinessType() {
      return
      getBusinessType({}).then(response => {
        this.BusinessTypeList = response.data
      })
    },
    // 查询
    handleQuery() {
      if (this.times&&this.times.length>0) {
        const date1 = new Date(this.times[0])
        const date2 = new Date(this.times[1])
        this.listQuery.startTIme = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate() + ' ' + date1.getHours() + ':' + date1.getMinutes() + ':' + date1.getSeconds()
        this.listQuery.endTime = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() + ' ' + date2.getHours() + ':' + date2.getMinutes() + ':' + date2.getSeconds()
      }else{
        this.listQuery.startTIme = null
        this.listQuery.endTime = null
      }
      this.pageNum = 1
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep{
  .el-table thead{
    color: #888888;
    font-size: 13px;
  }
  .el-table tr{
    color: #888888;
    font-size: 13px;
  }
  .el-table--medium th{
    padding: 8px 0;
  }
  .el-table--medium td{
    padding: 8px 0;
  }
  .btn1{
    color: #37A8AF;
    font-size: 13px;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td{
    background: #f3f4f5;
  }
  .el-pagination{
    padding: 0;
    margin-right: -4px;
  }
  .pagination-container{
    padding: 0;
    margin: 0;
  }
  .el-dialog__header{
    display: none;
  }
  .el-dialog__body{
    padding: 25px 30px 60px;
    font-size: 13px;
    color: #888888;
  }
  .modal-body{
    padding: 20px;
  }
  .el-dialog{
    width: 95%;
    margin-top: 10vh !important;
  }
  .el-form-item{
    margin-bottom: 15px;
  }
  .el-input__inner{
    color: #555555;
    border: 1px solid #cccccc;
  }
}
.demo-form-inline{
  padding: 40px 0 0 35px;
}
.box{
  margin-bottom: 0;
}
.box-body{
  padding-top: 0;
}
.btn-default{
  margin-right: 10px;
}
</style>
